<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card style="max-width: 100% ;height: 645px;">

                    <div class="demo-image__placeholder">
                        <div class="image-container">
                            <el-image :src="drone_info.imageUrl" />
                        </div>
                        <span class="namestyle">{{ drone_info.droneName }}</span>
                    </div>
                    <div class="title">
                        基本信息
                    </div>
                    <div class="basics">
                        <div class="label">品牌： {{ drone_info.brand }}</div>
                        <div class="label">防护等级： {{ drone_info.protectionRating }}</div>
                        <div class="label">系列： {{ drone_info.series }}</div>
                        <div class="label">关联相机： {{ drone_info.linkedCamera }}</div>
                        <div class="label">型号： {{ drone_info.model }}</div>
                        <div class="label">最大水平飞行速度： {{ drone_info.maxHorizontalSpeed }}米/秒</div>
                        <div class="label">内部型号： {{ drone_info.internalModel }}</div>
                        <div class="label">最大上升速度：{{ drone_info.maxAscentSpeed }}米/秒</div>
                        <div class="label">设备编号：<div>{{ drone_info.deviceCode }}</div>
                        </div>
                        <div class="label">最大下降速度：{{ drone_info.maxDescentSpeed }}米/秒</div>
                        <div class="label">飞控序列号：
                            <el-tooltip effect="dark" :content="drone_info.flightControllerSn" placement="top">
                                <div class="labeldiv">{{ drone_info.flightControllerSn }}</div>
                            </el-tooltip>
                        </div>
                        <div class="label">最大可承受风速：{{ drone_info.maxWindResistance }}米/秒</div>
                        <div class="label">动力方式：
                            <dict-tag :options="power_mode" :value="drone_info.powerType" />
                        </div>
                        <div class="label">最大载重：{{ drone_info.maxPayload }}克</div>
                        <div class="label">轴距：{{ drone_info.wheelbase }}毫米</div>
                        <div class="label">最小起飞重量：{{ drone_info.minTakeoffWeight }}克</div>
                        <div class="label">无人机类型：
                            <dict-tag :options="drone_type" :value="drone_info.droneType" />
                        </div>
                        <div class="label">旋翼数量：{{ drone_info.rotorCount }}</div>
                        <div class="label">最大飞行时间：{{ drone_info.maxFlightTime }}分钟</div>
                        <div class="label">产品序列号：<div class="labeldiv">{{ drone_info.productSn }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card style="max-width: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>飞行历史</span>
                            <!-- <div class="demo-date-picker"> -->
                            <div>
                                <el-date-picker v-model="value1" type="daterange" range-separator="-"
                                    start-placeholder="Start date" end-placeholder="End date" :size="size" />
                                <!-- </div> -->
                            </div>
                        </div>
                    </template>
                    <el-table v-loading="loading" :data="form" height="500px">
                        <el-table-column label="飞行时间" align="center" prop="execTime" />
                        <el-table-column label="任务信息" align="center" prop="taskName" />
                        <el-table-column label="任务状态" align="center" prop="status">
                            <template #default="scope">
                                <dict-tag :options="task_status" :value="scope.row.status" />
                            </template>
                        </el-table-column>
                        <el-table-column label="飞行信息" align="center" prop="flightInfo" />
                        <el-table-column label="飞手" align="center" prop="pilotName" />

                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template #default="scope">
                                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                    v-hasPermi="['equipment:drone_info:edit']">查看
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="onlineTotal >= 0" :total="onlineTotal" :page="onlineQuery.pageNum"
                        :limit="onlineQuery.pageSize" :page-sizes="[5, 10, 20, 50]"
                        @pagination="handleExecRecordPagination" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {
    getDrone_info
} from "@/api/equipment/drone_info";
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'
import { listTask, getTask, addTask, updateTask, delTask, pauseTask, stopTask, getTaskExecRecords, getMonthlySchedule, getTaskByDockId } from '@/api/uavTask/task'
import { useDict } from "@/utils/dict.js";
import { watch } from 'vue'
import dayjs from 'dayjs'
const { power_mode, drone_status, drone_bind_status, drone_type } = useDict('power_mode', 'drone_status', 'drone_bind_status', 'drone_type');

// 明确定义 value1 ✅
const value1 = ref([])

const { task_exec_type, task_exec_cycle, task_status } = useDict('task_exec_type', 'task_exec_cycle', 'task_status')
const form = ref([])

// 监听日期变化（正确方式）
watch(
    () => value1.value,
    (newVal) => {
        console.log('日期范围变化:', newVal) // 调试日志
        // if (newVal && newVal.length === 2) {
        //     getTaskExecRecordsList()
        // }
        getTaskExecRecordsList()
    },
    { deep: true }
)

const route = useRoute()
const userId = route.query.selected
const dockId = ref(null)

const drone_info = ref([])
const onlineTotal = ref(0)
const onlineQuery = ref({
    pageNum: 1,
    pageSize: 10,
    dockId: undefined,
})

// 处理执行记录分页
const handleExecRecordPagination = (val) => {
    onlineQuery.value.pageNum = val.page
    onlineQuery.value.pageSize = val.limit
    getTaskExecRecordsList()
}

//获取无人机基本信息
getDrone_info(userId).then(response => {
    drone_info.value = response.data
    drone_info.value.imageUrl = import.meta.env.VITE_APP_URL + drone_info.value.imageUrl
    dockId.value = drone_info.value.id
    getTaskExecRecordsList()
})

// 获取飞行历史列表信息（修正版）
const getTaskExecRecordsList = () => {
    const [start, end] = value1.value || []
    // 转换为 "YYYY-MM-DD" 格式字符串
    const beginTime = start ? dayjs(start).format('YYYY-MM-DD') : null
    const endTime = end ? dayjs(end).format('YYYY-MM-DD') : null

    getTaskByDockId({
        dockId: dockId.value,
        pageNum: onlineQuery.value.pageNum,
        pageSize: onlineQuery.value.pageSize,
        beginTime,
        endTime
    }).then(response => {
        form.value = response.rows
        onlineTotal.value = response.total
    }).catch(error => {
        console.error('获取任务失败:', error)
    })
}

onMounted(() => {
    getTaskExecRecordsList()
})
</script>

<style scoped>
:deep(.el-table__row) {
    height: 46px;
    /* 调整为更大的值，默认约48px */
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.basics {
    font-size: 14px;
    position: relative;
    margin-top: 34px;
    min-height: 322px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "a b";
    color: #1a1a1acc;
    margin-bottom: 20px;
}

.basics::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 45%;
    border-left: 1px solid var(--el-border-color);
}

.title {
    font-size: 16px;
    line-height: 14px;
    color: #3a3e5f;
    font-weight: 700;
}

.label {
    display: inline-block;
    /* color: #696969cc; */
    color: #3a3636cc;
    display: flex;
    flex-direction: row;

    .labeldiv {
        width: 110px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
    }
}

/* 新增样式 */
.demo-image__placeholder {
    display: flex;
    align-items: center;
    gap: 20px;
    /* 图片和名称间距 */
    padding: 20px 0;
}

.demo-image__placeholder .block {
    /* 修改图片容器为块级元素 */
        display: block !important;
        width: 100% !important;
        padding: 30px 0 0 0 !important;
}

.image-container {
    flex: 0 0 180px;
    /* 固定图片容器宽度 */
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f7fa;
}

.image-container .el-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.demo-image__placeholder .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-image__placeholder .el-image {
    margin: 0 auto;
}

.demo-image__placeholder.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 14px;
}

.demo-image__placeholder .dot {
    animation: dot 2s infinite steps(3, start);
    overflow: hidden;
}

.namestyle {
    /* 移除原有 line-height 和 margin */
        line-height: normal !important;
        margin-left: 0 !important;
    
        /* 新增样式 */
        display: block;
        width: 100%;
        /* text-align: center; */
        margin-top: 20px;
        word-break: break-all;
        /* 允许长单词换行 */
        white-space: normal;
        /* 允许换行 */

        flex: 1;
        font-size: 24px;
        font-weight: 500;
}
</style>